<form nz-form [formGroup]="form" (ngSubmit)="submit(this)" role="form" >
  <nz-tabset [nzAnimated]="false" class="tabs" (nzSelectChange)="switch($event)">
    <nz-tab [nzTitle]="'账户密码登录'">
      <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
      <nz-form-item>
        <nz-form-control nzErrorTip="请输入账号">
          <nz-input-group nzSize="large" nzPrefixIcon="user">
            <input nz-input formControlName="userName" placeholder="username: admin or user"/>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control nzErrorTip="请输入密码">
          <nz-input-group nzSize="large" nzPrefixIcon="lock">
            <input nz-input type="password" formControlName="password" placeholder="password: ng-alain.com"/>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>
    <nz-tab [nzTitle]="'手机号登录' ">
      <nz-form-item>
        <nz-form-control nzErrorTip="手机号不合法">
          <nz-input-group nzSize="large" nzPrefixIcon="user">
            <input nz-input formControlName="mobile" placeholder="mobile number"/>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control nzErrorTip="验证码不合法">
          <nz-row [nzGutter]="8">
            <nz-col [nzSpan]="16">
              <nz-input-group nzSize="large" nzPrefixIcon="mail">
                <input nz-input formControlName="captcha" placeholder="captcha"/>
              </nz-input-group>
            </nz-col>
            <nz-col [nzSpan]="8">
              <button
                type="button"
                nz-button
                nzSize="large"
                (click)="getCaptcha()"
                [disabled]="count"
                nzBlock
                [nzLoading]="loading"
              >
                {{ count ? count + 's' : ('验证码') }}
              </button>
            </nz-col>
          </nz-row>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>
  </nz-tabset>
  <nz-form-item>
    <nz-col [nzSpan]="12">
      <label nz-checkbox formControlName="remember">{{ '自动登录'  }}</label>
    </nz-col>
    <nz-col [nzSpan]="12" class="text-right">
      <a class="forgot">{{ '忘记密码'  }}</a>
    </nz-col>
  </nz-form-item>
  <nz-form-item>
    <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock>
      {{ '登录'  }}
    </button>
  </nz-form-item>
</form>
<div class="other">
  {{ '其他登录方式'  }}
  <i
    nz-tooltip="in fact Auth0 via window"
    (click)="open('window')"
    nz-icon
    nzType="alipay-circle"
    class="icon"
  ></i>
  <i nz-tooltip="in fact Github via redirect" (click)="open('github')" nz-icon nzType="taobao-circle" class="icon"></i>
  <i (click)="open('weibo')" nz-icon nzType="weibo-circle" class="icon"></i>
  <a class="register" routerLink="/passport/register">{{ '注册账号'  }}</a>
</div>

